<template>
	<view>
		<navbar mode="normal" title="我的订单"></navbar>
		<view class="item" v-for="(item,index) in list" :key="index" @click="toPay(item)" v-if="canshow">
			<image :src="$urlPrefix+item.image"></image>
			<view class="text">
				<text>{{item.title}}</text>
			</view>
			<view class="bottom">{{item.type}}
				<uni-icons size="14" type="arrowright" color="#a1a1a1"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				canshow:false,
				//订单的状态，0为待付款，1为待发货，2为待收货，3为已完成
				status:["待付款","待发货","待收货","已完成"]
			};
		},
		methods:{
			toPay(item){
				if(item.status == 0){
					uni.navigateTo({
						url:"../payment/payment?id="+item.id
					})
				}else{
					uni.showToast({
						title:"已经付完款啦"
					})
				}
			},
		},
		onLoad() {
			var user = this.$getNowUser()
			this.$request("order/getOne", {
				userId: user.id
			}, (res1) => {
				this.list = res1.data.data
				this.$request("goods/getAll",{},(res2)=>{
					for(var j in this.list){
						var order = this.list[j]
						for(var i in res2.data.data){
							var goods = res2.data.data[i]
							if(goods.id == order.goodsId){
								this.list[j].title = goods.title
								this.list[j].image = goods.mainImages[0]
								this.list[j].type = this.status[order.status]
								break
							}
						}
					}
					console.log(this.list);
					this.canshow = true
				})
			})
		}
	}
</script>

<style lang="scss">
	.item {
		//border: 2rpx solid red;
		height: 150rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-bottom: 10rpx;
		box-shadow: 5rpx 5rpx 10rpx #ccc;
		//align-items: center;
		position: relative;

		image {
			width: 140rpx;
			height: 140rpx;
			position: absolute;
			left: 5rpx;
			top: 5rpx;
			bottom: 5rpx;
		}

		.text {
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 5rpx;
			left: 145rpx;

			text {

				width: 450rpx;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				font-size: 28rpx;
				margin-left: 10rpx;
			}
		}

		.bottom {
			position: absolute;
			bottom: 5rpx;
			right: 5rpx;
			font-size: 28rpx;
			color: #a1a1a1;
		}
	}
</style>
